<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .active {
            color: red
        }

        .ok {
            background-color: aquamarine;
        }

        .test {
            padding: 10px;
            border: 1px solid #d123d1;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <!-- 对象语法 -->
        <span v-bind:class="{active:flag, ok:flag2}">样式绑定</span><br>
        <span :class="{active:flag, ok:flag2}">样式绑定</span><br>
        <button @click="handler">切换样式</button><br>
        <!-- 数组语法 -->
        <span :class="[activeClass, okClass]">样式绑定</span><br>
        <button @click="handler2">切换样式</button><br>
        <!-- 数组和对象结合使用 -->
        <span :class="[activeClass, okClass,{test:flag}]">样式绑定</span><br>
        <!-- 数组 -->
        <span :class="arrClass">样式绑定</span><br>
        <!-- 对象 -->
        <span :class="arrClass">样式绑定</span><br>

        <!-- style样式 -->
        <span :style="{color:colorStyle}">style样式</span><br>
        <span :style="styleObj">style样式</span><br>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                flag2: true,
                activeClass: 'active',
                okClass: 'ok',
                arrClass: ['active', 'ok'],
                objClass: {
                    active: true,
                    ok: true
                },
                colorStyle: 'red',
                styleObj: {
                    border: '1px solid #d123d1',
                    padding: '10px',
                    color: 'blue'
                }
            },
            methods: {
                handler: function () {
                    this.flag = !this.flag;
                    this.flag2 = !this.flag2;
                },
                handler2: function () {
                    this.activeClass = '';
                    this.okClass = '';
                },
            },
        })
    </script>
</body>

</html>